<template>
  <div id="vue-pdf-view">
    <div class="btn">
      <van-button type="success" @click="PDFDownload">文件下载</van-button>
      <van-button type="success" @click="PDFPrint">打印</van-button>
    </div>
    <vue-pdf-embed :source="pdfState.pdfSource" ref="vuePdfRef" />
  </div>
</template>

<script setup>
import { onMounted, reactive, ref } from "vue";
import VuePdfEmbed from "vue-pdf-embed";
const pdfState = reactive({
  pdfSource: {
    url: "/api/content/dam/cc/cn/legal/servicetou/Acrobat-Sign-Additional-Terms-of-Use-zh_CN-20231015.pdf",
    cMapUrl:
      "/api/content/dam/cc/cn/legal/servicetou/Acrobat-Sign-Additional-Terms-of-Use-zh_CN-20231015.pdf",
    cMapPacked: true,
  },
});
const vuePdfRef = ref(null);
// -- 获取文件名（用于 文件打印和下载）--
function getPDFFileName() {
  const last_index = pdfState.pdfSource.url.lastIndexOf("/");
  return pdfState.pdfSource.url.slice(last_index + 1);
}

// -- pdf文件下载 --
function PDFDownload() {
  vuePdfRef.value.download(getPDFFileName());
}
// -- pdf文件打印 --
function PDFPrint() {
  vuePdfRef.value.print(100, getPDFFileName(), true);
}
</script>
<style>
#vue-pdf-view {
  width: 100%;
  height: 100%;
  text-align: center;
  /* 内容溢出显示滚动条 */
  overflow: scroll;
  /* 隐藏x、y轴滚动条 */
  overflow-y: hidden;
  overflow-x: hidden;
}
.btn {
  display: flex;
  padding: 20px;
  justify-content: space-between;
}
/* 设置滚动栏的宽、高 */
#vue-pdf-view::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

/* 设置滚动条的样式 */
#vue-pdf-view::-webkit-scrollbar-thumb {
  border-radius: 15px;
  background-color: #eee;
}

/* 鼠标经过滚动条变换颜色 */
#vue-pdf-view::-webkit-scrollbar-thumb:hover {
  background-color: #cbcbff;
}
</style>
